<template>
  <el-dialog title="资产" :visible.sync="visible" width="1200px">
    <div class="el-box">
      <div class="list-box" id="list-box">
        <el-table
          :data="list"
          v-loading="loading"
          stripe
          style="width: 100%"
          header-row-class-name="headcss"
        >
          <el-table-column prop="Owner" label="地址" align="center">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.Owner"
                placement="right"
              >
                <p style="cursor: pointer">{{ addrStr(scope.row.Owner, 8) }}</p>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="Id"
            label="编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="Level"
            label="等级"
            align="center"
          ></el-table-column>
          <el-table-column prop="Mint" label="收益比例" align="center">
            <template slot-scope="scope">
              {{ scope.row.Mint + "%" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="Price"
            label="价值"
            align="center"
          ></el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              {{ shoseStr(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="OwnTime"
            label="购买日期"
            align="center"
            width="180"
          ></el-table-column>
        </el-table>
      </div>
      <div class="page-limit">
        <el-pagination
          @current-change="CurrentChange"
          :current-page="currentPage"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getUserNftList } from "@/utils/api";
import moment from "moment";
export default {
  data() {
    return {
      visible: false,
      list: [],
      loading: false,
      currentPage: 1,
      size: 10,
      total: 0,
      addr: "",
    };
  },
  methods: {
    async _getUserNftList() {
      let params = {
        addr: this.addr,
        size: this.size,
        page: this.currentPage - 1,
      };
      this.loading = true;
      let { data, response } = await getUserNftList(params);
      let { total, dataList } = data;
      this.loading = false;
      this.total = total;
      this.list = dataList;
    },
    open(addr) {
      this.addr = addr;
      this.visible = true;
      this._getUserNftList();
    },
    CurrentChange(page) {
      this.currentPage = page;
      this._getUserNftList();
    },
    addrStr(str, num) {
      if (str) {
        if (num) {
          return (
            str.substring(0, num) +
            "..." +
            str.substring(str.length - num, str.length)
          );
        } else {
          return (
            str.substring(0, 10) +
            "..." +
            str.substring(str.length - 10, str.length)
          );
        }
      } else {
        return str;
      }
    },
    shoseStr(row) {
      if (row.Level == 0) {
        const time = moment(row.OwnTime)
          .add(30, "days")
          .format("YYYY-MM-DD hh:mm:ss");
        const now = moment().format("YYYY-MM-DD hh:mm:ss");

        const day = time > now;
        if (day) {
          return "正常";
        } else {
          return "过期";
        }
      } else {
        if (row.Running == 1) {
          return "跑步中";
        } else {
          if (row.SellState == 0) {
            return "正常";
          } else if (row.SellState == 1) {
            return "挂单中";
          } else if (row.SellState == 2) {
            return "合成中";
          } else if (row.SellState == 3) {
            return "售卖中";
          }
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.el-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 600px;
}
.list-box {
  flex: 1;
}
.page-limit {
  display: flex;
  width: 100%;
  justify-content: center;
  padding-top: 20px;
}
</style>
<style>
.el-dialog__body {
  padding: 10px 20px 20px !important;
}
</style>
